<template>
  <div class="profile-page">
    <el-card class="profile-card" v-if="userInfo">
      <div class="profile-header">
        <el-avatar :size="80" :src="defaultAvatar" />
        <div class="profile-info">
          <div class="profile-name">{{ userInfo.name }}</div>
          <div class="profile-phone">{{ userInfo.phone }}</div>
          <div class="profile-id">工号：{{ userInfo.id }}</div>
        </div>
      </div>
      <el-divider />
      <div class="profile-stats">
        <div>
          <div class="stat-num">{{ userInfo.total_orders }}</div>
          <div class="stat-label">累计配送</div>
        </div>
        <div>
          <div class="stat-num">¥{{ userInfo.total_income }}</div>
          <div class="stat-label">累计收入</div>
        </div>
        <div>
          <div class="stat-num">{{ userInfo.rating || '-' }}</div>
          <div class="stat-label">评分</div>
        </div>
      </div>
      <el-divider />
      <div class="profile-detail">
        <div>状态：{{ userInfo.status_text }}</div>
        <div>性别：{{ userInfo.gender }}</div>
        <div>年龄：{{ userInfo.age || '-' }}</div>
        <div>站点：{{ userInfo.site || '-' }}</div>
        <div>注册时间：{{ userInfo.register_time }}</div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getProfile } from '@/assets/delivery.js'

const userInfo = ref(null)
const defaultAvatar = '/static/avatar.png'
const deliverymanId = 1 // 这里写死，实际可从登录信息获取

onMounted(async () => {
  const res = await getProfile(deliverymanId)
  if (res.data && res.data.code === 200) {
    userInfo.value = res.data.data
  }
})
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-card {
  width: 95vw;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 32px 24px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
}
.profile-info {
  flex: 1;
}
.profile-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.profile-phone, .profile-id {
  color: #888;
  font-size: 14px;
  margin-top: 4px;
}
.profile-stats {
  display: flex;
  justify-content: space-between;
  margin: 18px 0;
}
.stat-num {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
}
.stat-label {
  font-size: 13px;
  color: #888;
  text-align: center;
}
.profile-detail {
  font-size: 14px;
  color: #666;
  line-height: 2;
  margin-top: 10px;
}
</style> 